import React from 'react';
import { Router, Route, Link } from 'react-router-dom';
import axios from 'axios';
import './top.css';

class Top extends React.Component{
	constructor(props){
		super(props);
		this.state = {
			userName: ''
		}
	}

	componentDidMount(){
		let userName = localStorage.getItem('userName');
		if(userName){
			this.setState({
				userName: userName
			})
		}
	}

	logout(){
		axios.get('/count/logout').then((data) => {
			console.log(data)
			window.location.href = '#/login';
		}).catch((e) => {
			console.log(e)
		})
	}

	render(){
		return(
			<div className="top">
				<div className="pull-left">
					<a href="javascript:;"><img src={require('../../assets/img/logo.png')} /></a>
				</div>
				<div className="pull-right user-info">
					<span className="user">
						<img src={require('../../assets/img/user.png')} />
						欢迎您！{this.state.userName}
					</span>
					<span className="logout" onClick={this.logout.bind(this)}>
						<img src={require('../../assets/img/logout.png')} />
						退出系统
					</span>
				</div>
			</div>
		);
	}
}

export default Top;
